<template>
  <div id="home-map"></div>
</template>

<script lang="ts">
export default {
  name: "HomeMap",
};
</script>

<script lang="ts" setup>
/*
    1. 注册百度地图API账号，并创建应用得到ak
    2. 准备一个具备宽高的DOM容器
    3. 引入百度地图API的js
  */
import { onMounted } from "vue";

// 回调函数需要添加window上
window.initBMap = () => {
  // 代表百度地图api的js加载完成
  // 在指定容器上，创建百度地图
  const map = new BMapGL.Map("home-map");
  // 设置地图中心点经纬度
  const point = new BMapGL.Point(114.05, 22.5);
  // 初始化地图
  map.centerAndZoom(point, 12);
  // 添加比例尺控件
  var scaleCtrl = new BMapGL.ScaleControl();
  map.addControl(scaleCtrl);
  // 添加缩放控件
  var zoomCtrl = new BMapGL.ZoomControl();
  map.addControl(zoomCtrl);
  // 添加城市列表控件
  var cityCtrl = new BMapGL.CityListControl();
  map.addControl(cityCtrl);
};

onMounted(() => {
  const script = document.createElement("script");
  script.src =
    "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=yKr4bAkWl8YMF4YuGPbM9xbWbtIWFzSG&callback=initBMap";
  document.body.appendChild(script);
});
</script>

<style scoped>
#home-map {
  width: 100%;
  height: 600px;
}
</style>
